<template>
  <div>
    <el-card>
      <el-form ref='form' :model='form' label-width='80px' size='mini'>
        <el-form-item label='选择对象'>
          <div style='display: flex;align-items: center;'>
            <div
              v-for='(item,index) in nowTreeArr'
              :key='item.id'
              class='myCheck'
              name='type'
              @click='deleteType(item,index),search()'
            >{{ item.name }}
              <i class='el-icon-circle-close' />
            </div>
          </div>
        </el-form-item>
        <div class='formtop'>

          <el-form-item label='指标组' prop='type_id' :rules="[{ required: true, message: '指标组不能为空'}]">
            <el-select v-model='form.type_id' placeholder='请选择指标组' @change='regionChange'>
              <el-option v-for='(item,index) in optionArr' :key='index' :label='item.type_name' :value='item.id' />
            </el-select>
          </el-form-item>

          <el-form-item
            prop='param_id'
            :rules="[{ required: true, message: '参数不能为空'}]"
            style='width: 300px;'
          >
            <el-select v-model='form.param_id' collapse-tags multiple placeholder='请选择'>
              <el-option
                v-for='(item,index) in indexGroupParameterArr'
                :key='index'
                :label='item.label_name'
                :value='item.id'
              />
            </el-select>
          </el-form-item>

          <el-form-item
            prop='day_time'
            :rules="[
              { required: true, message: '日期不能为空'}
            ]"

            label='日期'
          >
            <el-date-picker
              v-model='form.day_time'
              value-format='yyyy-MM-dd'
              type='date'
              placeholder='选择日期'
              style='width: 100%;'
            />
          </el-form-item>
          <el-form-item>
            <el-button type='primary' @click='search'>查询</el-button>
          </el-form-item>
        </div>
        <div v-if="form.resource ==='自定义'" class='formtop'>
          <el-form-item label='起始日期'>
            <el-date-picker v-model='form.date1' type='date' placeholder='选择日期' style='width: 100%;' />
          </el-form-item>
          <el-form-item label='截止日期'>
            <el-date-picker v-model='form.date1' type='date' placeholder='选择日期' style='width: 100%;' />
          </el-form-item>
        </div>
      </el-form>
      <div style='width: 100%' v-for='(v,n) in chartArr' :key='n'>
        <el-divider />
        <div :id="'energyRanking'+n" class='energyRanking_box' />
      </div>
    </el-card>
  </div>
</template>
<script>
import * as echarts from 'echarts'
import commMix from './commonMix.js'
import { getgetIndexGroupChart, getgetIndexGroupParameter, getIndexGroup } from '@/api/efficiencyAnalysisApi.js'

export default {
  name: 'electricityComparisonChild',
  components: {},
  mixins: [commMix],
  props: {
    choseData: {
      type: Object,
      default: () => {
      },
    },
  },
  data() {
    return {
      options: [],
      form: {
        type: '',
        day_time: '2022-03-28',
        monitor_id: [],
        param_id: [],
        type_id: '',
      },
      treeObj: [],
      value2: [],
      dropDownValue: '',
      optionsMetaAll: [],
      optionsMetaShow: [],
      valueMeta: [],
      input3: '',
      IndexGroup: [],
      nowTreeArr: [],
      optionArr: [],
      indexGroupParameterArr: [],
      chartArr: [],
    }
  },

  watch: {
    choseData: { // 监听的对象
      deep: true, // 深度监听设置为 true
      handler: function(newV, oldV) {
        for (var i = 0; i < this.nowTreeArr.length; i++) {
          if (newV.id === this.nowTreeArr[i].id) {
            return
          }
          // 去重
        }
        this.nowTreeArr.push(newV)
        this.getIndexGroup(this.nowTreeArr)
      },
    },
    chartArr: { // 监听的对象
      deep: true, // 深度监听设置为 true
      handler: function(newV, oldV) {
        this.$nextTick(() => {
          for (var i = 0; i < newV.length; i++) {
            this.setEnergyRanking(newV[i], i)
          }
        })
      },
    },
  },

  mounted() {
    this.$message({
      showClose: true,
      message: '请选择指标组进行查询',
      type: 'success',
    })
  },
  methods: {
    search() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          var monitorIdArr = []
          if (this.nowTreeArr.length === 0) {
            this.$message({
              showClose: true,
              message: '请选择监控设备',
              type: 'error',
            })
            return
          }
          for (var i = 0; i < this.nowTreeArr.length; i++) {
            monitorIdArr.push(this.nowTreeArr[i].id)
          }
          this.form.monitor_id = monitorIdArr
          getgetIndexGroupChart(this.form).then((res) => {
            this.chartArr = res.data.data
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    regionChange() {
      this.indexGroupParameterArr = []
      this.form.param_id = []
      this.getgetIndexGroupParameter()
    },
    // 获取参数
    getgetIndexGroupParameter() {
      getgetIndexGroupParameter({ type_id: this.form.type_id }).then((res) => {
        this.indexGroupParameterArr = res.data.data
        for (let i = 0; i < this.indexGroupParameterArr.length; i++) {
          this.form.param_id.push(this.indexGroupParameterArr[i].id)
        }
      })
    },
    getIndexGroup(arr) {
      var monitorIdArr = []
      if (arr.length === 0) {
        this.$message({
          showClose: true,
          message: '请选择监控设备',
          type: 'error',
        })
        return
      }
      for (var i = 0; i < arr.length; i++) {
        monitorIdArr.push(arr[i].id)
      }

      getIndexGroup({ monitor_id: monitorIdArr }).then((res) => {
        this.optionArr = res.data.data
      })
    },
    dropDownSearch() {
      var _this = this
      _this.valueMeta = []
      _this.optionsMetaShow = _this.optionsMetaAll.filter(_this.filterSearch)
    },
    filterSearch(item) {
      return item.includes(this.dropDownValue)
    },
    handleClick(tab, event) {
      console.log(tab, event)
    },
    setEnergyRanking(v, n) {
      echarts.dispose(document.getElementById('energyRanking' + n))
      var myChart = echarts.init(document.getElementById('energyRanking' + n))
      console.log(v.series)
      // 绘制图表
      var option = {
        title: {
          text: v.label_name,
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
            label: {
              show: true,
            },
          },
        },
        toolbox: {
          show: true,
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ['line', 'bar'] },
            restore: { show: true },
            saveAsImage: { show: true },
          },
        },
        xAxis: {
          type: 'category',
          data: v.xData,
        },
        yAxis: {
          type: 'value',
          name: '',
        },
        legend: {
          data: v.legend,
          itemGap: 5,
        },
        series: v.series,
      }
      myChart.setOption(option)
      window.addEventListener('resize', () => {
        myChart.resize()
      })
    },
  },
}
</script>

<style lang='scss' scoped>
::v-deep .tableHead {
  background-color: #EDF1F8 !important;
}

.formtop {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.energyRanking_box {
  width: 100%;
  height: 40vh;
}

.bottom_box {
  width: 100%;
  height: 50%;
  display: flex;
  align-items: center;
  justify-content: space-between;

  & > div {
    width: 45%;
    height: 34vh;
  }
}

.myCheck {
  padding: 0 30px 0 20px;
  border: 1px solid #c6c6c6;
  border-radius: 10px;
  margin-left: 10px;
  display: flex;
  align-items: center;
  position: relative;
  cursor: pointer;

  i {
    color: #c6c6c6;
    font-size: 25px;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
  }
}
</style>
